<template>
  <div class="search-wrapper">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="searchValue"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 搜索历史 -->
    <div class="search-content-wrapper">
      <div class="search-content-item" v-for="item in searchContent">
        <h3>{{item.title}} <span v-if="item.isClear">清楚{{item.title}} </span></h3>
				<div class="search-list">
					<van-tag type="primary" color="#f5f5f5" text-color="#999999" 
					size="large" v-for="tag in item.searchList" @click="goPage('searchResult',tag)">{{tag}}</van-tag>
				</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup(props, context) {
		const router = useRouter()
    //搜索内容
    const searchValue = ref('')
		const searchContent = [
			{
				title:"搜索历史",
				isClear:true,
				searchList:["青椒肉丝","鲜花","山姆会员商店","新鲜水果","生日鲜花","牛肉","酸奶"]
			},
			{
					title:"热门搜索",
						isClear:false,
				searchList:["山姆会员商店","香槟玫瑰","牛奶","酸奶","生日鲜花","水果"]
			}
		]
		//跳转页面
    const goPage = (pageName: string, data?: string) => {
      router.push({
        path: '/' + pageName,
        query: { searchVal: data },
      })
    }
    //搜索
    const onSearch = () => {}
    //取消
    const onCancel = () => {
			router.go(-1)
		}
    return {
      searchValue,
			searchContent,
			goPage,
      onSearch,
      onCancel,
    }
  },
})
</script>
<style scoped lang="scss">
@import '@/styles/viriables.scss';
.search-content-wrapper{
	padding: 15px;
	h3{
		font-size: 18px;
		font-weight: normal;
		color: $content-font-color;
		span {
			float: right;
			font-size: 14px;
			color: $second-font-color;
		}
	}
	.search-list{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap:10px
	}
}
</style>
